<template>
	<view>
		<view class="u-p-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索" :show-action="false" shape="square" clearabled @change="getList(true)"></u-search>
				</view>
				<view class="u-p-l-30">
					<button size="mini" @click="createRecord" class="u-h-64" style="display: block;">
						<view class="u-flex u-align-items u-justify-content u-h-60">
							<u-icon name="plus" size="28" class="u-tips-color"></u-icon>
							<text class="u-p-l-10 u-tips-color">现金交接</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<view
			class="order grid-box border-shadow u-m-b-20" 
			v-for="(item,index) in list"
			:key="item.id"
		>
			<view class="title u-border-bottom u-p-b-10">
				<view class="u-p-b-10"><text class="u-font-32">{{item.type}}</text></view>
				<view class="u-p-b-10" v-if="item.type == '店员交接'"><text class="u-font-24 u-tips-color">由<text class="bold-txt">{{item.staff.name}}</text>接手现金</text></view>
				<view class="u-p-b-10" v-else><text class="u-font-24 u-tips-color">由<text class="bold-txt">{{item.staff.name}}</text>操作</text></view>
				<view class="u-p-b-10" v-if="item.relationnumber"><text class="u-font-24 u-tips-color">关联单据编号：<text class="bold-txt">{{item.relationnumber}}</text></text></view>
			</view>
			<view class="middle">
				<view class="u-flex">
					<view class="u-flex-1">
						<text class="label u-tips-color">
							<!-- 金额变动 -->
							<text v-if="item.type == '店员交接'">当前余额</text>
							<text v-else>金额变动</text>
						</text>
						<view class="u-m-t-8">
							<text class="u-flex-1 u-text-right u-font-36">
								<text v-if="item.type == '店员交接'" class="color-warning">{{item.change}}<text class="unit">元</text></text>
								<text v-else :class="item.change > 0?'color-success':'color-danger'"><text>{{item.change > 0?'+':''}}</text>{{item.change}}<text class="unit">元</text></text>
							</text>
						</view>
					</view>
					<view class="u-flex-1">
						<text class="label u-tips-color">
							<!-- 变动前金额 -->
							<text v-if="item.type == '店员交接'">交接前余额</text>
							<text v-else>变动前金额</text>
						</text>
						<view class="u-m-t-8">
							<text class="u-flex-1 u-text-right u-font-36">{{item.changebefore}}</text>
							<text class="unit">元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom u-border-top u-p-t-20">
				<view class="more">
					<view class="u-flex-1">
						<text class="u-font-24 u-tips-color">{{item.date}}</text>
					</view>
					<u-icon name="clock" class="u-tips-color"></u-icon>
					<text class="u-font-24 u-tips-color">{{$u.timeFrom(new Date(item.date), false)}}</text>
				</view>
			</view>
		</view>
		<!-- 现金交接 -->
		<u-modal
			v-model="showWindow" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="现金交接" 
			@confirm="confirmCashHandover"
			@cancel="showWindow = false">
			<scroll-view :scroll-y="true" class="slot-content">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form ref="uForm" label-width="180rpx">
						<u-form-item label="交接人" class="u-p-0" required v-if="cashstaffid == userdetail.id">
							<view class="input-text u-flex u-m-l-0" @click="show = true;">
								<text>{{addForm.name || '点击选择员工'}}</text>
								<view class="u-flex-1"></view>
								<u-icon name="arrow-right" class="tips-txt"></u-icon>
							</view>
						</u-form-item>
						<!-- <u-form-item label="交接时间" class="u-p-0" required>
							<view class="input-text u-flex u-m-l-0" @click="show1 = true;">
								<text>{{addForm.date || '点击选择时间'}}</text>
								<view class="u-flex-1"></view>
								<u-icon name="arrow-right" class="tips-txt"></u-icon>
							</view>
							<u-picker v-model="show1" mode="time" :params="timeParams" @confirm="confirmDate" @close="show1 = false"></u-picker>
						</u-form-item> -->
						<u-form-item :label="cashstaffid == userdetail.id?'交接金额':'接收金额'" required>
							<u-input v-model="addForm.amount" type="digit" :border="true" />
						</u-form-item>
						<u-form-item label="备注">
							<u-input v-model="addForm.remarks" type="textarea" :height="160" :border="true" />
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</u-modal>
		<staff-list v-model="show" :fillterStoreId="storeId" @confirm="confirmStaff" @close="show = false"></staff-list>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import staffList from '@/components/form-select-type/staff-list.vue'
	
	export default {
		components:{
			staffList
		},
		data() {
			return {
				key: '',
				pageIndex: 1,
				pageSize: 20,
				list: [],
				loadStatus: 'loadmore',
				// 添加现金交接记录
				showWindow: false,
				show: false,
				show1: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				addForm:{
					name: "",
					storeId: null,
					staffId: null,
					// date: "",
					amount: null,
					remarks: ""
				},
				cashstaffid: 0
			}
		},
		onLoad() {
			this.getList()
			
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				storeId: state => state.storeId
			})
		},
		methods: {
			createRecord(){
				this.$u.get('/Store/Details?id=' + this.storeId).then((res) => {
					console.log('站点详情:',res)
					this.cashstaffid = res.cashstaffid
					
					this.showWindow = true
					
					if(this.addForm.date == ''){
						this.addForm.date = this.utils.curDateTime('yyyyMMddHHmm')
					}
				}).catch(() => {
					
				})
			},
			confirmStaff(item) {
				console.log(item)
				this.addForm.name = item.name
				this.addForm.staffId = item.id
			},
			confirmDate(item){
				console.log(item)
				this.addForm.date = `${item.year}-${item.month}-${item.day} ${item.hour}:${item.minute}`
			},
			// 现金交接
			confirmCashHandover(){
				this.addForm.storeId = this.storeId
				
				console.log('confirmCashHandover',this.addForm)
				uni.showModal({
					title: '提示',
					content: '您确认要现金交接吗？',
					success: (res)=> {
						if (res.confirm) {
							this.$u.post('/Store/Cash/Handover',{
								storeId: this.addForm.storeId,
								staffId: this.addForm.staffId || 0,
								// date: this.addForm.date,
								amount: this.addForm.amount,
								remarks: this.addForm.remarks
							}).then((res)=>{
								uni.showToast({
									title: "操作成功"
								})
								this.getList()
								this.addForm = {
									name: "",
									storeId: null,
									staffId: null,
									remarks: "",
									amount: null
								}
								this.showWindow = false
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
				
			},
			getList(){
				this.$u.post('/Store/Cash/List',{
					PageIndex: this.pageIndex,
					PageSize: this.pageSize,
					Key: this.key,
					// timeType: this.timeType, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
					// startDate: this.startDate, //开始时间
					// endDate: this.endDate, //结束时间
					storeId: this.storeId
				}).then((res)=>{
					this.list = res.rows
					this.total = res.total
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		width: 100%;
		margin-left: 30rpx;
		input{
			height: 70rpx;
		}
	}
	
	.err {
		color: $u-type-error;
		border-color: $u-type-error !important;
	}
	
	.order {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.left {
				align-items: center;
	
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					display: flex;
					align-items: center;
				}
			}
	
			.right {
				color: $u-type-warning-dark;
			}
		}
	
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
	
			.left {
				margin-right: 20rpx;
	
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
	
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
					font-weight: bold;
				}
	
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
			}
	
			.right {
				margin-left: 10rpx;
				text-align: right;
	
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
	
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
	
		.total {
			text-align: right;
			font-size: 24rpx;
	
			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
			}
		}
	
		.middle {
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
			.label{
				
			}
			.unit{
				font-size: 24rpx;
				// color: $u-tips-color;
			}
			
		}
	
		.bottom {
			// display: flex;
			margin-top: 20rpx;
			// justify-content: space-between;
			// align-items: center;
			.more{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
</style>